<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-category :categoryList="categoryList"></home-category>
    <home-location></home-location>
    <home-hot :hotList="hotList"></home-hot>
    <home-like :likeList="likeList"></home-like>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>
<script>
import HomeHeader from "./pages/header";
import HomeSwiper from "./pages/swiper";
import HomeCategory from "./pages/category";
import HomeLocation from "./pages/location";
import HomeHot from "./pages/hot";
import HomeLike from "./pages/like";
import HomeWeekend from "./pages/weekend";

import { mapState } from "vuex";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeCategory,
    HomeLocation,
    HomeHot,
    HomeLike,
    HomeWeekend
  },
  data() {
    return {
      swiperList: [],
      categoryList: [],
      hotList: [],
      likeList: [],
      weekendList: [],
      currCity: ""
    };
  },
  computed: {
    ...mapState(["cityName"])
  },
  methods: {
    getHttp() {
      this.$axios.get("/api/home.json").then(res => {
        res.data.homeData.forEach((item, index) => {
          if (item.city === this.cityName) {
            this.swiperList = item.swiperList;
            this.categoryList = item.categoryList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.weekendList = item.weekendList;
          }
        });
      });
    }
  },
  mounted() {
    this.currCity = this.cityName;
    this.getHttp();
  },
  activated() {
    if (this.currCity != this.cityName) {
      this.currCity = this.cityName;
      this.getHttp();
    }
  }
};
</script>
<style lang="stylus" scoped>
.home
  background #f5f5f5
</style>


